<template>
  <div>
    Hello
  </div>
</template>

<script>
import { onBeforeMount, onBeforeUnmount, onMounted, onUnmounted } from 'vue';

export default {
  // !#1 把 Vue2 的 beforeCreate 和 created 综合成了 setup
  setup () {
    console.log('#1 setup')
    // !#2 相比较 Vue2，相同的声明周期钩子可以写多次（setup 除外）
    onBeforeMount(() => {
      console.log('#2.1 onBeforeMount')
    })
    onBeforeMount(() => {
      console.log('#2.2 onBeforeMount')
    })
    onMounted(() => {
      console.log('#3 onBeforeMount')
    })
    onBeforeUnmount(() => {
      console.log('onBeforeUnmount 销毁前')
    })
    onUnmounted(() => {
      console.log('onUnmounted 销毁后')
    })
  }
}
</script>

<style lang="scss" scoped>

</style>